<template>
  <el-dialog
    v-model="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="room ? room.roomName : '会议室详情'"
    width="70%"
  >
    <div v-if="room" class="room-detail-content">
      <div class="room-detail-header">
        <div class="room-status">
          <el-tag v-if="isRoomCurrentlyInUse" type="danger">使用中</el-tag>
          <el-tag v-else type="success">空闲</el-tag>
          <el-tag v-if="room.isApproval === '1'" type="warning">需审批</el-tag>
        </div>
      </div>

      <el-descriptions border class="room-info" :column="2">
        <el-descriptions-item label="位置">{{ room.positionDescription || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="容量">{{ room.capacity || '未设置' }}人</el-descriptions-item>
        <el-descriptions-item label="设备">{{ formatEquipment(room.equipment) || '无' }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{ room.description || '无描述' }}</el-descriptions-item>
      </el-descriptions>

      <div class="room-bookings">
        <div class="section-title">
          <h4>当日预约情况</h4>
          <div class="booking-date">{{ currentDate }}</div>
        </div>

        <el-table v-if="hasBookingsToday" border :data="room.activityInfos || []" style="width: 100%; margin-top: 12px">
          <el-table-column label="会议名称" min-width="150" prop="title" />
          <el-table-column label="时间段" width="180">
            <template #default="scope">{{ scope.row.startTime.substr(11, 5) }} - {{ scope.row.endTime.substr(11, 5) }}</template>
          </el-table-column>
        </el-table>

        <div v-else class="no-bookings">
          <el-empty description="当日暂无预约" :image-size="100" />
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { computed } from 'vue'
import type { MeetingRoom } from '/@/types/api'

// 会议活动接口
interface ActivityInfo {
  id: string
  title: string
  startTime: string
  endTime: string
  userName?: string
  userDept?: string
  [key: string]: any
}

// 会议室接口
interface ConferenceRoom {
  id: string | number
  roomName: string
  capacity?: string | number
  positionDescription?: string
  equipment?: string
  description?: string
  isApproval?: string
  activityInfos?: ActivityInfo[]
  [key: string]: any
}

const props = defineProps<{
  modelValue: boolean
  room: MeetingRoom | null
  currentDate: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'book', room: MeetingRoom): void
}>()

// 控制对话框可见性
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
})

// 是否当日有预约
const hasBookingsToday = computed(() => {
  return props.room?.activityInfos && props.room.activityInfos.length > 0
})

// 当前是否在使用中
const isRoomCurrentlyInUse = computed(() => {
  if (!props.room || !props.room.activityInfos) return false

  const now = new Date()
  return props.room.activityInfos.some((activity) => {
    if (props.currentDate !== dayjs().format('YYYY-MM-DD')) return false

    const startTime = new Date(`${props.currentDate} ${activity.startTime.substr(11, 5)}`)
    const endTime = new Date(`${props.currentDate} ${activity.endTime.substr(11, 5)}`)

    return startTime <= now && now <= endTime
  })
})

// 格式化会议室设备信息
const formatEquipment = (equipment: string) => {
  if (!equipment) return ''
  return equipment.split(',').join('、')
}

// 关闭对话框
const handleClose = () => {
  visible.value = false
}

// 预约会议室
const handleBook = () => {
  emit('book', props.room)
  visible.value = false
}
</script>

<style scoped>
.room-detail-content {
  padding: 0 10px;
}

.room-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.room-status {
  display: flex;
  gap: 10px;
}

.room-info {
  margin-bottom: 24px;
}

.room-bookings {
  margin-top: 24px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
}

.section-title h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.booking-date {
  font-size: 14px;
  color: #606266;
}

.no-bookings {
  padding: 20px 0;
}

.dialog-footer {
  padding-top: 20px;
}
</style>
